<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>My AutoComplete</title>
		<style type="text/css" media="screen" id="test">
			.auto{
				width:300px;
				height:200px;
				border:0px solid blue;
				left:110px;
				padding:10px;
			}
			.gac_m { 
				background:white none repeat scroll 0 0;
				border:1px solid black;
				cursor:default;
				font-size:13px;
				line-height:17px;
				margin:0;
				position:absolute;
				z-index:99;
				list-style:none;
				width:300px;
			}
			.gac_m ul {
				list-style:none;
				padding:0;
				margin:0 0 0 3px;
			}
			.gac_m li {

			}
			/**
				选中的li
			**/
			.gac_b {
				background:#3366CC none repeat scroll 0 0;
				color:white;

				overflow:hidden;
				padding-left:3px;
				text-align:left;
				white-space:nowrap;
			}
			.gac_c {
				overflow:hidden;
				padding-left:3px;
				text-align:left;
				white-space:nowrap;
			}
			.gac_b td {
				color:white;
			}
			.gac_d {
				color:green;
				font-size:10px;
				overflow:hidden;
				padding:0 3px;
				text-align:right;
				white-space:nowrap;
			}		
			.currencyList { 
				margin:0;
				border-left:1px solid #BCDDEE;
				border-right:1px solid #BCDDEE;
				border-top:1px solid #BCDDEE;
				width:300px;
				height:100%;
			}
.currencyList ul {
	list-style:none;
	padding:0;
	line-height:25px;
	margin:0;
}
.currencyList ul li{
	border-bottom:1px solid #BCDDEE;
	border-collapse:separate;
	text-indent:5px;

}

		</style>
		<script type="text/javascript">
			djConfig = {
				isDebuger:true,
				parseOnLoad:true
			}
		</script>
		<script type="text/javascript" src="dojo/dojo.js"></script>
		<script type="text/javascript">
			dojo.require("dijit._Widget");
			dojo.require("dijit._Templated");
			dojo.require("dojox.dtl.html");
			dojo.require("dojox.dtl.render.html");
			dojo.require("dojox.dtl.Context");
			dojo.declare("dojot.util.AutoComplete",[dijit._Widget,dijit._Templated],{
				templateString:"<div class='auto' dojoAttachPoint='outerNode'><input id='t1' type='text' dojoAttachPoint='input' size='55' maxlength='50' autocomplete='off'  dojoAttachEvent='onkeypress:_onKeypress'/>\
				<div class='gac_m' dojoAttachPoint='autoText'></div></div>",
				templateOption:"<ul><!--{% for item in items %}--><li><!--{{ item }}--></li><!--{% endfor %}--></ul>",
				postCreate:function(obj){
					console.log(this.input);
					this.context = new dojox.dtl.Context({
						items: ["apple", "banana", "orange"]
					});
					this.template = new dojox.dtl.HtmlTemplate(this.templateOption);
					//获取autoComplete对象
					this.items = [];
					//放一个空元素，为输入的文本留得位置，google的做法是把输入的东西在一个隐藏的input框里面。我们暂时先放到
					//这个数组中吧。
					this.items.push("");
					//获取需要添加autoComplete的元素，并得到它的位置对象			
					var marginBox = dojo.marginBox(dojo.byId("t1"));
					console.log((marginBox.t + marginBox.h)+'px');

					dojo.style(this.autoText,{					
						top:(marginBox.t + marginBox.h-1)+'px',
						left:(marginBox.l)+'px',
						width:(marginBox.w-2) + 'px',
						display:"none"
					});	
					dojo.connect(this.autoText,"onmouseover",function(){
						console.log("over");
						console.log(item);
						//that._highlightOption(item,index);	
					});
					//给每个子元素添加事件。
					//我们用不用维护一个li数组呢？这样的话，我们就可以快速的定位到某个元素了呀！这个主意不错
					//这样就可以对于我们的上下选择可以很方便了。但是google有一个就是当我们用上下键选择元素的时候，我们可以
					//在选则到输入框的时候，会出现我们最后输入的那个值。换句话说，就是如果我们在文本框里面写了java,然后我们
					//选择到第十个的时候，然后再往下选择，就应该到输入框这个位置了。然后在输入框里面还要显示出原来我们保存的那个
					//值，这样就实现了，我们连续鼠标滚动了呀！

				},
				_onKeypress:function(evt){
					console.log("_onKeyPress--------------------");
					var key = evt.charOrCode;
					console.log(evt.type);
					//如果是下面这些按键跳出
					if(evt.altKey || (evt.ctrlKey && (key != 'x' && key != 'v')) || evt.key == dojo.keys.SHIFT){
						return; // throw out weird key combinations and spurious events
					}
					//我们的搜索给取消，
					var doSearch = false;
					var pw = this._popupWidget;
					var dk = dojo.keys;
					//如果目前正在显示list，就交给
					if(this._isShowingNow){
						//pw.handleKey(key);
					}
					console.log("dk.DOWN_ARROW-->"+dk.DOWN_ARROW);
					switch(key){
						//如果是向下按键			
						case dk.DOWN_ARROW:
							console.log("DOWN_ARROW");
							if(!this._isShowingNow){
								this.showAutoCompleteText();
							}else{
								this._highlightOption(this.currentIndex + 1);
							}
							dojo.stopEvent(evt);
							break;
						//如果是向上键
						case dk.UP_ARROW:
							if(!this._isShowingNow){
								this.showAutoCompleteText();
							}else{
								this._highlightOption(this.currentIndex - 1);
							}
							dojo.stopEvent(evt);
							break;
						 case dk.ENTER:
							//处理用户回车事件，加入咱们自己的处理
							var highlighted;
							//如果处于当前选中状态，并且有当前选中的元素
							if(this._isShowingNow && (highlighted = this.getHighlightedOption())){				
								this.setInputValue(highlighted.innerHTML);
								this.closeAutoCompleteText();
								//可能需要加表单提交事件
							}
							evt.preventDefault();
						  case dk.TAB:
								var newvalue = this.attr('displayedValue');
								// #4617: 
								//		if the user had More Choices selected fall into the
								//		_onBlur handler
								var highlighted;
								if(this._isShowingNow && (highlighted = this.getHighlightedOption())){				
									this.setInputValue(highlighted.innerHTML);
									this.closeAutoCompleteText();
								}
								break;
							case ' ':
								var highlighted;
								if(this._isShowingNow && (highlighted = this.getHighlightedOption())){				
									this.setInputValue(highlighted.innerHTML);
									this.closeAutoCompleteText();
								}else{
									doSearch = true;
								}
								break;

							case dk.ESCAPE:
								this._prev_key_backspace = false;
								this._prev_key_esc = true;
								if(this._isShowingNow){
									dojo.stopEvent(evt);
									this.closeAutoCompleteText();
								}
								break;	
							case dk.DELETE:
							case dk.BACKSPACE:
								doSearch = true;
								break;
							default: // non char keys (F1-F12 etc..)  shouldn't open list
								doSearch = typeof key == 'string';

						}
						if(this.searchTimer){
							clearTimeout(this.searchTimer);
						}
						if(doSearch){
							//因为响应的事件是kerpress,我们的值需要keyup后才能得到，所以延迟点时间，
							//才能获取我们真正想要的值
							setTimeout(dojo.hitch(this, "_startSearchFromInput"),1);	
						}
				},
				_startSearchFromInput:function(){
					//搜索数据
					var value = this.input.value;
					console.log(value);
					//清空原来的数据
					this.items = [];
					//加入新的数据
					this.items[0] = value;
					//假装返回的数据
					this.context.items = [value+"apple", value+"banana", value+"orange"];
					this.autoText.innerHTML = "";
					//绑定数据
					this._generateDataAndBind();
					//显示
					this.showAutoCompleteText();
				},
				_generateDataAndBind:function(){
				console.log("--------------------------------------_generateDataAndBind");
					//重新生成li 列表
					var node = this.template.render(this.context).getRootNode();
					console.log("node1-->"+node);
					var that = this;
					//给所有的li元素绑定事件
					dojo.query("li",node).forEach(function(item,index){
						//当我们鼠标进入我们的li的时候，需要记录当前选中的元素
						//把item保存到数组中，方便键盘上下键操作选中此选项
						that.items.push(item);
						//当鼠标在元素上面时高亮

					});
					this.autoText.appendChild(node);			
				},
				//高亮选中的item
				_highlightOption:function(item,index){
					//需要把上一个选中的元素的高亮给清除，然后重新设置当前选中元素。	
					if(this._highlighted_option){
						dojo.removeClass(this._highlighted_option,"gac_b");
					}	
					//重新设置当前高亮元素
					this._highlighted_option = item;
					this._highlighted_index = index;	
					dojo.addClass(item,"gac_b");
				},
				showAutoCompleteText:function(){
					dojo.style(this.autoText,{
						display:"block"
					});	
					this._isShowingNow = true;
				},
				closeAutoCompleteText:function(){
					dojo.style(this.autoText,{					
						display:"none"
					});
					this._isShowingNow = false;
				},
				//返回当前选中的option，或者指定索引的option
				getHighlightedOption:function(index){
					return (index && this.items[index]) || this.currentItem;
				},
				setInputValue:function(value){
					dojo.attr(this.input,"attr",value);
				}
			});
			dojo.addOnLoad(function(){
				console.log("begin");
				var obj = {

				}
				var auto = new dojot.util.AutoComplete(obj,dojo.byId("auto1"));
			});


		</script>
	</head>
	<body>
		<form method="post" action="testing.php" id="form" name="test">
			<div id="auto1" class="auto">
				<input id="text1" type="text" name="test" value="value"/>
			</div>	
		</form>
	</body>
</html> 